import 'package:flutter/material.dart';

class TextfieldHomePage extends StatefulWidget {
  @override
  _TextfieldHomePageState createState() => _TextfieldHomePageState();
}

class _TextfieldHomePageState extends State<TextfieldHomePage> {
  // 用于文本输入框
  TextEditingController controller = new TextEditingController();
  FocusNode focusNode = new FocusNode();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    String preText = "6666";

    // 控制初始化 的时候鼠标保持在文字最后
    controller = TextEditingController.fromValue(

        // 用来设置初始化时显示
        TextEditingValue(
            // 设置文本内容 controller.text="0000"
            text: preText,
            // 设置光标位置
            selection: TextSelection.fromPosition(TextPosition(
                affinity: TextAffinity.downstream, offset: preText.length))));

    // 添加监听 当textField 中内容发生变化是回调 焦点变动也会触发
    // onChanged 当TextField文本发生变化时才会回调
    controller.addListener(() {
      String currentStr = controller.text;
      print("controller 监听 $currentStr");
    });

    // 它能监听到第一帧绘制完成 第一帧绘制完成标着这 已经build完成
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 获取输入框焦点
      FocusScope.of(context).requestFocus(focusNode);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('text'),
          actions: [
            FlatButton(
                onPressed: () {
                  String inputText = controller.text;
                  print("输入框的内容是 $inputText");
                },
                child: Text('保存', style: TextStyle(color: Colors.white)))
          ],
        ),
        body: Center(
            child: SizedBox(
                width: 400,
                height: 300,
                child: Container(
                    alignment: Alignment(0, 0),
                    // padding: EdgeInsets.all(4),
                    // color: Colors.grey,
                    child: TextField(
                      // 用来控制 textField获取焦点的问题
                      focusNode: focusNode,
                      controller: controller,
                      maxLength: 300,
                      maxLines: 1,
                      // 设置光标的颜色
                      cursorColor: Colors.red,
                      // 设置光标的宽度
                      cursorWidth: 6,
                      // 设置光标的圆角
                      cursorRadius: Radius.circular(10),

                      autofocus: true,
                      keyboardType: TextInputType.phone,
                      onChanged: (value) {
                        print('回调内容 $value');
                      },
                      decoration: InputDecoration(
                        // 输入框提示语
                        // 未获取焦点时
                        hintText: "请输入用户名",
                        hintStyle: TextStyle(color: Colors.grey),
                        // 为获取焦点时 在占位符的位置 获取后 拍在左上角
                        labelText: "用户名",
                        labelStyle: TextStyle(color: Colors.green),

                        // 帮助提示语

                        helperText: "这里是帮助提示语",
                        helperStyle: TextStyle(color: Colors.green),

                        errorText: "错误提示语",
                        errorStyle: TextStyle(color: Colors.red),

                        // 输入框前
                        prefixText: "prefix",
                        prefixStyle: TextStyle(color: Colors.deepPurple),

                        prefixIcon: Icon(Icons.verified_user),

                        // 输入框后
                        suffixText: "suf",
                        suffixStyle: TextStyle(color: Colors.black),

                        suffixIcon: Icon(Icons.close),

                        // 输入框右下角的内容 默认是文字最大的长度
                        counterText: "4/6",
                        counterStyle: TextStyle(color: Colors.deepPurple),
                        // 以下的内容不能与 上面的 prefixText suffixText 共存，接受的是一个widget
                        // 可扩展性更强
                        // prefix: Text('A'),
                        // suffix: Text('B'),

                        // OutlineInputBorder 上下左右都有边框
                        // UnderlineInputBorder 下边框
                        border: OutlineInputBorder(
                            // 用来配置边框的样式
                            borderSide:
                                BorderSide(color: Colors.red, width: 2.0),
                            // 设置边框的圆角
                            borderRadius: BorderRadius.all(
                              Radius.circular(5),
                            )),

                        // 获取焦点时的border
                        focusedBorder: OutlineInputBorder(
                            // 用来配置边框的样式
                            borderSide:
                                BorderSide(color: Colors.blue, width: 2.0),
                            // 设置边框的圆角
                            borderRadius: BorderRadius.all(
                              Radius.circular(5),
                            )),

                        // 不可编辑的边框演示
                        disabledBorder: OutlineInputBorder(
                            // 用来配置边框的样式
                            borderSide:
                                BorderSide(color: Colors.grey, width: 2.0),
                            // 设置边框的圆角
                            borderRadius: BorderRadius.all(
                              Radius.circular(5),
                            )),

                        // 可编辑时的边框样式
                        enabledBorder: OutlineInputBorder(
                            // 用来配置边框的样式
                            borderSide:
                                BorderSide(color: Colors.green, width: 2.0),
                            // 设置边框的圆角
                            borderRadius: BorderRadius.all(
                              Radius.circular(5),
                            )),
                      ),
                      enabled: true,
                      style: TextStyle(

                          // 设置文字颜色
                          color: Colors.black,
                          // 用设置Text 的线
                          // TextDecoration.none 没有
                          // TextDecoration.underline 下划线
                          // TextDecoration.overline 下划线
                          // TextDecoration.lineThrough 删除线

                          decoration: TextDecoration.none,
                          // 设置下划线颜色
                          decorationColor: Colors.white,
                          // 设置下划线的的样式
                          // dashed 虚线
                          // solid 实线
                          // double 两条实线
                          // wavy 波浪线
                          decorationStyle: TextDecorationStyle.double,
                          // 设置文字大小
                          fontSize: 16.0,
                          // 设置文字为粗体
                          // bold 粗体
                          // w600
                          fontWeight: FontWeight.w200,
                          // 斜体
                          fontStyle: FontStyle.normal,
                          // 单词与单词之间的距离
                          wordSpacing: 1.0,
                          // 控制行高
                          height: 1.5,
                          // 文字背景颜色
                          backgroundColor: Colors.white,
                          // 设置 文字之间的距离
                          letterSpacing: 1.2),
                      // 这只文本对齐方式
                      // TextAlign left 靠左 right 靠右 center 居中
                      // TextAlign justify 拉伸 end 靠末尾 start 靠起始位置
                      // 需要设置 textDirection rtl right to left ltr left to right

                      textAlign: TextAlign.left,
                      // textDirection: TextDirection.ltr,
                    )))));
  }
}
